<!DOCTYPE HTML>
<head>
    <script src="../js/css3d.min.js"></script>
    <style>
        #main {
            width: 500px;
            width: 500px;
        }
    </style>
</head>
<body>

<div id="main">

</div>
<script>
    //创建场景
    var s = new C3D.Stage();
    s.size(window.innerWidth, window.innerHeight).material({
        color: "#000"
    }).update();
    document.getElementById('main').appendChild(s.el);

    //创建1个立方体放入场景
    var c = new C3D.Skybox();
    c.size(1024).position(0, 0, 0).material({
        front: {image: "images/yxj/yxj_01.jpg"},
        back: {image: "images/yxj/yxj_02.jpg"},
        left: {image: "images/yxj/yxj_03.jpg"},
        right: {image: "images/yxj/yxj_04.jpg"},
        up: {image: "images/yxj/yxj_05.jpg"},
        down: {image: "images/yxj/yxj_06.jpg"}

    }).update();
    s.addChild(c);

    //响应屏幕调整尺寸
    function resize() {
        s.size(window.innerWidth, window.innerHeight).update();
    }

    window.onresize = function () {
        resize();
    };
    resize();

    //刷新场景
    requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
            function (callback) {
                setTimeout(callback, 1000 / 60);
            };

    function go() {
//            c.rotate(0, 0.1, 0).updateT();

        s.camera.rotate(0, 0.3, 0).updateT();

        requestAnimationFrame(go);
    }

    requestAnimationFrame(go);

</script>
</body>
